<!--
 * @Author: hucc
 * @Date: 2021-10-14 14:39:36
 * @LastEditors: hucc
 * @LastEditTime: 2021-10-14 18:59:51
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vuex.js"></script>
</head>

<body>
    <div id="app">
        <h3>{{data1}}</h3>
        <h4>vuex-state-{{msg}}</h4>
        <button @click="$store.commit( 'SET_MSG', '你好，状态机')">修改状态机数据</button>
        <h5>vuex-getters-{{upperMsg}}</h5>
        <ul>
            <li v-for="(item,index) in categories" :key="index">
                栏目编号：{{item.id}} 栏目名称：{{item.name}}
            </li>
        </ul>
    </div>
    <script>
        //1.声明Vuex实例store
        let store = new Vuex.Store({
            state: {
                //在根实例中的computed方法中进行调用
                msg: 'this is vuex data',
                categories: []
            },
            //getters相当于vue实例中的计算属性
            getters: {
                //在根实例中的computed方法中进行调用
                upperMsg(state) {
                    return state.msg.toUpperCase();
                }
            },
            mutations: {
                //突变是修改state中数据的唯一方法
                //突变方法有两个参数 第一个是state，第二个是调用突变方法传入的形参
                SET_MSG(state, payload) {
                    state.msg = payload
                },
                SET_CATEGORIES(state, payload) {
                    state.categories = payload
                }
            },
            actions: {
                //动作 用来存放组件共享的异步方法
                //actions方法 在根实例的钩子函数中的created()方法中进行调用
                //actions内部提交突变方法(通过context参数对象) 不是直接变更
                async findAllCategories(context) {
                    //let res =await ajax()
                    let res = {
                            status: 200,
                            message: '查询成功',
                            data: [{
                                id: 1,
                                name: "校园新闻"
                            }, {
                                id: 2,
                                name: "热点新闻"
                            }, {
                                id: 3,
                                name: "娱乐新闻"
                            }, {
                                id: 4,
                                name: "资讯快报"
                            }],
                            timestamp: 1634194154016
                        }
                        //提交突变来修改状态机内部中的数据
                    console.log(context);
                    //突变提交的方法 通过commit方法提交 两个参数 第一个参数是突变函数名字 第二个参数是突变函数的实参
                    context.commit('SET_CATEGORIES', res.data)
                }
            }
        })
        new Vue({
            el: '#app',
            data: {
                data1: 'this is vm data',
            },
            methods: {},
            computed: {

                //通过计算属性将vuex state中的数据映射过来
                msg() {
                    return this.$store.state.msg
                },
                categories() {
                    return this.$store.state.categories
                },
                //通过计算属性将 getters映射过来
                upperMsg() {
                    return this.$store.getters.upperMsg
                }
            },
            created() {
                //在该钩子函数中 调用vuex状态机中的动作 即调用actions里面的方法
                //通过dispatch()来分发动作
                return this.$store.dispatch('findAllCategories');
                //提交突变 即mutations里面的方法需要通过commit方法来提交再进行改变
                //this.$store.commit('SET_MSG',"你好，状态机");
            },
            //2.将状态机实例注入到vue实例中
            store: store
        })
    </script>
</body>

</html>